<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery 自定义滚动条</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script  type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background: #ccc;
        }
        .scroll-demo{
            width: 540px;
            border: 1px solid #e5e5e5;
            background: #fff;
            margin: 30px auto;
        }
        /* 标签切换区域 */
        .scroll-tab{
            height: 34px;
            border-bottom: 1px solid #e5e5e5;
            color: #666;
            background: #f8f8f8;
        }
        .scroll-tab .tab-item{
            float: left;
            font: 14px/13px "Microsoft Yahei";
            height: 34px;
            text-align: center;
            border-right: 1px solid #e5e5e5;
            padding: 0 20px;
        }
        .scroll-tab .tab-active{
            color: #00be3c;
            background: #fff;
            border-top: 2px solid #00be3c;
            margin: -1px auto;
        }
        /*滚动内容区域*/
        .scroll-wrap{
            position: relative;
            width: 100%;
            height: 300px;
        }
        .scroll-wrap .scroll-cont{
            height: 100%;
            padding: 0 15px;
            overflow: hidden;
        }
        .scroll-wrap .scroll-cont h3{
            font: 14px/13px "Microsoft Yahei";
            text-align: center;
        }

        .scroll-wrap .scroll-cont p{
            font-size: 14px;
            line-height: 20px;
            text-indent: 2em;
            margin-bottom: 10px;
        }

        /*滚动条*/
        .scroll-wrap .scroll-bar{
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 100%;
            background-color: #00be3c ;
        }

        /* clear float*/
        .clearfix:after{
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }


    </style>
</head>
<body>
<!--容器区域-->
<div class="scroll-demo">
    <!--标签切换区域-->
    <ul class="scroll-tab clearfix">
        <li class="tab-item tab-active">第一篇</li>
        <li class="tab-item">第二篇</li>
        <li class="tab-item">第三篇</li>
        <li class="tab-item">第四篇</li>
    </ul>
    <!--滚动内容局域-->
    <div class="scroll-wrap">
        <!--滚动内容-->
        <div class="scroll-cont">
            <!--春天来了-->
            <h3 class="anchor">春天来了</h3>
            <div class="scroll-ol">
                春天的内容..............
                <p>夏天来了内容.............</p>
            </div>
            <!--夏天来了-->
            <h3 class="anchor">夏天来了</h3>
            <div class="scroll-ol">
                <p>夏天来了内容.............</p>
                <p>夏天来了内容.............</p>
            </div>
            <!--秋天来了-->
            <h3 class="anchor">秋天来了</h3>
            <div class="scroll-ol">
                秋天来了.....................
                <p>夏天来了内容.............</p>
            </div>
            <!--冬天来了-->
            <h3 class="anchor">冬天来了</h3>
            <div class="scroll-ol">
                冬天来了...................
                <p>夏天来了内容.............</p>
            </div>
        </div>
    </div>
</div>




<script>
//    jQuery.noConflict(); //将$符所有权剔除
//    var $$ = jQuery;

    $(document).ready(function ()
    {
        //相同的元素进行合并
        $('#box ,.pox ,p ,strong').css('color','red');
        //后代选择器
        $('ul li a').css('color','green');
        //通配符选择器
    });
</script>
</body>
</html>